import { View, Text, Button, Image } from "@tarojs/components";
import Slideshow from "../../components/Slideshow/Slideshow";
import Presentation from "../../components/Presentation/Presentation";
import Classify from "../../components/Classify/Classify";
import "./ranking.less";
import { useState } from "react";
export default function ranking() {
  const [Ranking_list, setRanking_list] = useState([
    {
      img: "https://img2.baidu.com/it/u=3292607149,2669698429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
      Serial_Number: "001",
      name: "张三",
      Votes: "10000",
    },
    {
      img: "https://img2.baidu.com/it/u=3292607149,2669698429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
      Serial_Number: "002",
      name: "李四",
      Votes: "9000",
    },
    {
      img: "https://img2.baidu.com/it/u=3292607149,2669698429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
      Serial_Number: "003",
      name: "王五",
      Votes: "8000",
    },
    {
      img: "https://img2.baidu.com/it/u=3292607149,2669698429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
      Serial_Number: "004",
      name: "赵六",
      Votes: "7000",
    },
    {
      img: "https://img2.baidu.com/it/u=3292607149,2669698429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
      Serial_Number: "005",
      name: "钱七",
      Votes: "6000",
    },
    {
      img: "https://img2.baidu.com/it/u=3292607149,2669698429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
      Serial_Number: "006",
      name: "孙八",
      Votes: "5000",
    },
  ]);
  return (
    <View className="ranking">
      <Slideshow />
      <View className="content">
        {/* 数据展示 */}
        <Presentation />
        {/* 分类 */}
        <Classify />
        {/* 排名前三 */}
        <View className="Ranking_Three">
          <View className="two">
            <Image
              className="img"
              src="https://img2.baidu.com/it/u=3292607149,2669698429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
            />
            <View className="gray">李忠义</View>
            <View className="yellow">票数：61404</View>
          </View>
          <View className="one">
            <Image
              className="img"
              src="https://img2.baidu.com/it/u=3292607149,2669698429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
            />
            <View className="gray">何其欣</View>
            <View className="yellow">票数：63260</View>
          </View>
          <View className="three">
            <Image
              className="img"
              src="https://img2.baidu.com/it/u=3292607149,2669698429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
            />
            <View className="gray">仇上明</View>
            <View className="yellow">票数：50819</View>
          </View>
        </View>
        <View className="p_Ranking">选手排名</View>
        {/* 排名 */}
        <View className="Ranking">
          {Ranking_list.map((item, index) => {
            return (
              <View className="item" key={index}>
                <Image className="img" src={item.img} />
                <View>
                  <View style={{ fontSize: "18px", fontWeight: "bold" }}>
                    <Text>{item.Serial_Number}</Text>
                    <Text style={{ marginLeft: "10px" }}>{item.name}</Text>
                  </View>
                  <View style={{ marginTop: "10px" }}>票数：{item.Votes}</View>
                </View>
                <Text>第{index + 1}名</Text>
              </View>
            );
          })}
        </View>
      </View>
    </View>
  );
}
